<template>
  <view class="content">
      <view class="mForm">
        <view class="mFormItem">
          <view class="mFormRig">
            <view class="inp">
              <u-input
                v-model="text"
                type="textarea"
                height="240"
                placeholder="填写简介，展示自己"
              />
            </view>
          </view>
        </view>
      </view>

    <view class="submit" @click="text.length && submit()">
      <view class="m-btn" :style="{opacity: text.length ? 1: .5}"> 提交</view>
    </view>
  </view>
</template>

<script>
import {updateInfo} from '@/api/service-home'
export default {
  components: {
  },

  data() {
    return {
      text: "",
    };
  },

  onLoad(opi) {
    this.text = opi.text || ''
  },

  methods: {
    async   submit() {
      if(!this.text.length) return this.$utils.toast('昵称不能为空')
      await updateInfo({key: 'desc',val: this.text})
      this.$utils.goBack()
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    width: 100%;

    input {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }
  }
}

.des {
  padding: 8rpx 24rpx 0;
  color: #8c8c8c;
  font-size: 24rpx;
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  padding: 80rpx 24rpx 0;
}
</style>
